<template>
  <el-dialog
    title="题目预览"
    width="900px"
    :visible="dialog"
    :before-close="close"
  >
    <el-row style="margin-bottom: 20px; font-size: 14px">
      <el-col :span="6">
        <span
          >【题型】：
          <span v-if="!(questionData.questionType === '1')">单选题</span>
          <span v-else-if="!(questionData.questionType === '2')">多选题</span>
          <span v-else-if="!(questionData.questionType === '3')">简答题</span>
        </span>
      </el-col>
      <el-col :span="6">
        <span>【编号】：{{ questionData.id }}</span>
      </el-col>
      <el-col :span="6">
        <span
          >【难度】：
          <span v-if="!(questionData.difficulty === '1')">简单</span>
          <span v-else-if="!(questionData.difficulty === '2')">一般</span>
          <span v-else-if="!(questionData.difficulty === '3')">困难</span>
        </span>
      </el-col>
      <el-col :span="6">
        <span>【标签】：{{ questionData.tags }}</span>
      </el-col>
    </el-row>
    <el-row style="margin-bottom：20px;">
      <el-col :span="6"
        ><span>【学科】：{{ questionData.subjectID }}</span></el-col
      >
      <el-col :span="6"
        ><span>【目录】：{{ questionData.catalogID }}</span></el-col
      >
      <el-col :span="6"
        ><span>【方向】：{{ questionData.direction }}</span></el-col
      >
    </el-row>
    <hr />
    <el-row>
      <el-col>
        <div>【题干】：</div>
        <span v-html="questionData.question" style="color: blue"></span>
      </el-col>
      <el-col>
        <span v-if="!(questionData.questionType === '1')">单选题</span>
        <span v-else-if="!(questionData.questionType === '2')">多选题</span>
        <span v-else-if="!(questionData.questionType === '3')">简答题</span>
        &ensp;
        <span>选项：（以下选中的选项为正确答案）</span>
      </el-col>
    </el-row>
    <div v-if="!(questionData.questionType === '1')">
      <el-row v-for="item in questionData.option" :key="item">
      <el-col>
          <el-radio>{{item}}</el-radio>
      </el-col>
      </el-row>
    </div>
    <div v-else-if="!(questionData.questionType === '2')">
      <el-row v-for="item in questionData.option" :key="item">
      <el-col>
          <el-checkbox>{{item}}</el-checkbox>
      </el-col>
      </el-row>
    </div>
    <div v-else-if="!(questionData.questionType === '3')">
      <el-row>
        <el-col>
            <p>{{item}}</p>
        </el-col>
        </el-row>
    </div>

    <hr />
    <el-row>
      <el-col>
        <span>【参考答案】：</span>
        <el-button @click="playTo" type="danger" size="mini"
          >视频答案预览</el-button
        >
      </el-col>
      <el-col>
        <video
          controls
          width="300"
          height="250"
          v-if="play"
          :src="questionData.videoURL"
        ></video>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        <span>【答案分析】：{{ questionData.answerID }}</span>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        <span>【题目备注】：{{ questionData.remarks }}</span>
      </el-col>
    </el-row>
    <hr />
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('close')" size="small">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'RandomDialog',
  props: {
    dialog: {
      type: Boolean,
      required: true
    },
    questionData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      play: false
    }
  },
  methods: {
    clearVal () {
      try {
        this.dialog = false
        this.$emit('update:dialog', this.dialog)
      } catch (error) {}
    },
    playTo () {
      this.play = true
    },
    close () {
      this.$emit('close')
      this.isVideoShow = false
    }
  }
}
</script>

<style scoped>
span {
  font-size: 13px;
}
</style>
